<!--  -->
<template>
  <div class="container">
    <el-dialog title="申请理由详情" :visible.sync="dialogVisible" width="30%">
      <span>{{ reason }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <div class="operation-group">
      <el-form
        :inline="true"
        :model="searchVo"
        class="demo-form-inline"
        style="margin: 10px; float: right"
      >
        <el-form-item label="员工">
          <el-input v-model="searchVo.user" placeholder="员工"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="searchVo.type" placeholder="类型"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchVo.state" placeholder="请选择">
            <el-option label="待审核" value="0"> </el-option>
            <el-option label="通过" value="1"> </el-option>
            <el-option label="驳回" value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="searchVo.applyDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="applications">
      <el-table-column
        type="index"
        width="75"
        align="center"
        header-align="center"
        label="序号"
      >
        <template slot-scope="scope">
          <div v-if="scope.$index + 1 == 1" class="first">1</div>
          <div v-if="scope.$index + 1 == 2" class="second">2</div>
          <div v-if="scope.$index + 1 == 3" class="third">3</div>
          <div
            v-if="
              scope.$index + 1 != 1 &&
              scope.$index + 1 != 2 &&
              scope.$index + 1 != 3
            "
          >
            {{ scope.$index + 1 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="avatarUrl"
        label="用户"
        width="250"
        header-align="center"
      >
        <template slot-scope="scope">
          <el-row>
            <el-col :span="8">
              <img
                :src="scope.row.avatarUrl"
                style="width: 66px; height: 66px; border-radius: 50%"
              />
            </el-col>
            <el-col :span="16">
              <el-row>
                <el-col
                  :span="24"
                  style="margin-left: 15px; margin-top: 10px; font-weight: 600"
                  >{{ scope.row.name }}</el-col
                >
              </el-row>
              <el-row>
                <el-col
                  :span="24"
                  style="margin-left: 15px; margin-bottom: 10px; color: gray"
                  >{{ scope.row.pinyinName }}</el-col
                >
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>

      <el-table-column
        label="申请类型"
        align="center"
        header-align="center"
        width="100"
      >
        <template slot-scope="scope">
          <el-tag type="primary">{{ scope.row.type }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="理由"
        align="center"
        header-align="center"
        width="250"
      >
        <template slot-scope="scope">
          <div class="reason">{{ scope.row.reason }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="applyDate" label="日期" align="center" width="200">
      </el-table-column>
      <el-table-column label="日期" align="center" width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.state == 0" class="wait">待审核</div>
          <div v-if="scope.row.state == 1" class="success">通过</div>
          <div v-if="scope.row.state == 2" class="fault">驳回</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" header-align="center">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-search"
            circle
            @click="showDetail(scope.row.reason)"
          ></el-button
          ><el-button
            type="success"
            v-if="scope.row.state == 0"
            icon="el-icon-check"
            circle
          ></el-button>
          <el-button
            type="danger"
            v-if="scope.row.state == 0"
            icon="el-icon-close"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination-region"
      :current-page="currentPage"
      :total="totalRecords"
      :page-size="limit"
      :page-sizes="[4, 7, 12, 16, 20, 24, 28]"
      style="margin: 30px 0; text-align: center"
      layout="sizes,prev,pager,next,jumper,->,total,slot"
      @current-change="changeCurrentPage"
      @size-change="changeSize"
    />
  </div>
</template>

<script>
import pinyin from "pinyin";
export default {
  data() {
    return {
      applications: [
        {
          applicationId: 1,
          name: "盛上锋",
          avatarUrl:
            "https://yygh-zjut.oss-cn-hangzhou.aliyuncs.com/IS-system/ssf.jpg",
          type: "调班",
          before: "2023-4-8 12:00-13:00",
          reason:
            "由于我在这个时间段需要给我的弟弟送东西，经过我和Mike的协商，我们决定临时调整一下班次，将Mike明天下午15:00-16:00的班与我的调换",
          state: 0,
          applyDate: "2023-4-7 21:15",
        },
        {
          applicationId: 1,
          name: "李迈克",
          avatarUrl:
            "https://yygh-zjut.oss-cn-hangzhou.aliyuncs.com/IS-system/mike.png",
          type: "调班",
          before: "2023-4-8 8:00-10:00",
          reason:
            "昨天身体非常不舒服，想去医院看看，晚上上吐下泻，希望能请假明天上午的排班好好休息一下！",
          state: 1,
          applyDate: "2023-4-7 21:00",
        },
        {
          applicationId: 1,
          name: "胡思怡",
          avatarUrl:
            "https://yygh-zjut.oss-cn-hangzhou.aliyuncs.com/IS-system/hsy.jpg",
          type: "请假",
          before: "2023-4-8 18:00-20:00",
          reason: "今天晚上我们可能要举行家庭聚餐，因此我想临时请个假！",
          state: 2,
          applyDate: "2023-4-7 21:00",
        },
        {
          applicationId: 1,
          name: "郭曜",
          avatarUrl:
            "https://yygh-zjut.oss-cn-hangzhou.aliyuncs.com/IS-system/gy.jpeg",
          type: "调班",
          before: "2023-4-5 11:00-13:00",
          reason:
            "我的室友邀请我去参加同学会，我和徐振华交流后决定与他明天下午14:00-16:00的班次进行交换！",
          state: 2,
          applyDate: "2023-4-5 21:00",
        },
      ],
      currentPage: 1,
      totalRecords: 15,
      searchVo: {},
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      dialogVisible: false,
      reason: "",
    };
  },

  created() {
    this.packageApplications();
  },
  mounted() {},

  methods: {
    showDetail(reason) {
      this.dialogVisible = true;
      this.reason = reason;
    },
    chineseToPinyin(chineseString) {
      var result = "";
      // 将中文字符串转换为拼音字符串
      const pinyinString = pinyin(chineseString, {
        style: pinyin.STYLE_NORMAL,
      });
      for (var i = 0; i < pinyinString.length; i++) {
        var str = pinyinString[i][0];
        if (i == pinyinString.length - 1) {
          result += str;
        } else {
          if (i != 0) {
            result += " ";
          }
          result += str.charAt(0).toUpperCase() + str.slice(1);
        }
      }
      return result;
    },
    packageApplications() {
      this.applications.forEach((application) => {
        application.pinyinName = this.chineseToPinyin(application.name);
      });
    },
  },
};
</script>
<style scoped>
.operation-group {
  height: 65px;
  margin: 10px 0;
  border-radius: 15px;
  background: white;
  position: relative;
  display: flex;
}

.first {
  margin-top: 10px;
  margin-left: 15px;
  color: white;
  max-width: 30px;
  max-height: 30px;
  border-radius: 15px;
  background-image: linear-gradient(
    to right,
    rgb(69, 170, 242),
    rgb(75, 123, 236)
  );
}
.second {
  margin-top: 10px;
  margin-left: 15px;
  color: white;
  max-width: 30px;
  max-height: 30px;
  border-radius: 15px;
  background-image: linear-gradient(
    to right,
    rgb(254, 211, 48),
    rgb(253, 150, 68)
  );
}
.third {
  margin-top: 10px;
  margin-left: 15px;
  color: white;
  max-width: 30px;
  max-height: 30px;
  border-radius: 15px;
  background-image: linear-gradient(
    to right,
    rgb(38, 222, 129),
    rgb(32, 191, 107)
  );
}

.reason {
  width: 225px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /*内容限制的行数 需要几行写几就行*/
}

.wait {
  font-weight: bold;
  color: gray;
}
.success {
  color: green;
}
.fault {
  color: red;
}

.pagination-region {
  position: absolute;
  left: 40%;
  bottom: -10px;
}
</style>
